/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */
@font-face {
  /*给字体命名*/
  font-family: '庞门正道标题体';
  /*引入字体文件*/
  src: url('@/assets/fonts/PangMenZhengDaoBiaoTiTi.ttf');
  font-weight: normal;
  font-style: normal;
}

img,
svg {
  /* 火狐 */

  /* webkit浏览器 */

  /* IE10 */
  user-select: none;

  /* 选中文字时避免出现蓝色背景 */
}

/**全局修改滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
  // background: rgba(199, 209, 242, 1);
  border-radius: 2px;
  cursor: pointer;
}

::-webkit-scrollbar-thumb {
  background: rgba(220, 223, 230, 1);
  border-radius: 10px;
  cursor: pointer !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 223, 230, 1);
  cursor: pointer !important;
}

/* ::-webkit-scrollbar-track {
    background: rgb(255, 255, 255, 0.8);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a7a5a5;
} */
::-webkit-scrollbar-corner {
  background: #ffffff;
}

.skills-box {
  display: flex;
  flex-direction: column;
  background-color: #5599FA;
  height: 100%;

  .skills-body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 70px);
    align-items: center;
    justify-content: space-around;

    &>span {
      font-size: 60px;
      color: #FFFFFF;
    }

    .card-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 80px;

      .card-item {
        cursor: pointer;
        width: 280px;
        height: 247px;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        &>div {
          width: 94px;
          height: 120px;
          background-size: 100% 100% !important;
        }

        &>span {
          color: #515151;
          font-size: 20px;
          max-width: 200px;
          text-align: center;

        }


      }

      .card-item:hover {
        &>span {
          color: #5598F8;
        }
      }
    }

    .skills-btn {
      cursor: pointer;
      width: 281px;
      height: 57px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5598F8;
      font-size: 36px;
      background: #FFFFFF;
      border-radius: 5px;
    }
  }

}
.skills-btn {
  cursor: pointer;
  width: 281px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5598F8;
  font-size: 36px;
  background: #FFFFFF;
  border-radius: 5px;
}